{% extends 'base.html' %}

{% block content %} 
<h1 id="TP">Training Program</h1>
    <main>
        <section class="col-md-10 col-md-offset-1">
            <table class="table">
                {% for week in zipped_training_plan %}
                <tr class="sortable">
                    {% for day, workout in week %}
                    <td class="droppable">
                      <time class="no-sort" datetime={{day.isoformat()}}>{{day.day}}</time>
                        <div class="draggableWorkout">{{ workout.show_workout() }}
                            {% set segments = workout.segments %}
                            {% for segment in segments %}
                                {% set segment = segment.show_segment() %}
                            <div>
                                {% for attr in segment %}
                                    <div>{{attr}}</div>
                                {% endfor %}
                            </div>
                            {% endfor %}
                        </div>    
                    </td> 
                    {% endfor %}
                </tr>
                {% endfor%}
            </table>        
        </section>
    </main>

<script>
  $(function() {
    $( ".sortable" ).sortable();
    $( ".sortable" ).disableSelection();
  });
  </script>
  <script>
  // $(function() {
  //   $( ".draggableWorkout" ).draggable({
  //     revert: "invalid",
  //     axis: "x" });
  //   });
  //   $( ".droppable" ).droppable({
  //     drop: function( event, ui ) {
  //       $( this )
  //         .find( "td" )
  //         .html( "Dropped!" );
  //     }
  //   });
  //   $( ".sortable" ).sortable({
  //     revert: true
  //   });
  
  </script>
{% endblock %}
